<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="供货商名称">
                <a-input allowClear placeholder="请输入供货商名称" v-model="queryParam.supplier_name" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="商品名称">
                <a-input allowClear placeholder="请输入商品名称" v-model="queryParam.name" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="商品分类">
                <a-cascader
                  allowClear
                  :options="catList"
                  @change="onCascaderChange"
                  :fieldNames="{ label: 'name', value: 'id', children: 'children' }"
                  placeholder="请选择商品分类"
                />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="getList">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :bordered="false">
      <a-table
        :rowKey="
          (r, i) => {
            return r.id
          }
        "
        :pagination="{
          current: queryParam.page,
          total: this.totalCount,
          showSizeChanger: false,
          onChange: this.tablePageChange,
        }"
        :columns="columns"
        :data-source="list"
        :scroll="{ x: 'max-content' }"
      >
        <div slot="name" slot-scope="text, record">
          <div class="name">
            <div class="pic">
              <img :src="record.pic_url" alt="" />
            </div>
            <div class="info">
              <span>{{ record.name }}</span>
            </div>
          </div>
        </div>

        <span slot="supplier" slot-scope="text, record">
          <div class="name">
            <div class="pic">
              <img :src="record.supplier.logo" alt="" />
            </div>
            <div class="info">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ record.supplier.name }} </span>
                </template>
                <span style="color: #000">
                  {{ record.supplier.name }}
                </span>
              </a-tooltip>
            </div>
          </div>
        </span>

        <span slot="price" slot-scope="text"> ￥{{ text || 0 }} </span>

        <div slot="action" slot-scope="scope">
          <a-button type="link" @click="edit(scope)">编辑</a-button>
          <a-button type="link" @click="see(scope.id)">查看</a-button>
        </div>

        <div slot="expandedRowRender" slot-scope="record" v-if="record.attr && record.attr.length">
          <a-table
            :columns="skuColumns"
            :data-source="record.attr"
            bordered
            :rowKey="
              (r, i) => {
                return r.id
              }
            "
            :pagination="false"
          >
            <div slot="pic_url" slot-scope="text">
              <img :src="text" alt="" style="width: 48px; height: 48px; border-radius: 2px" />
            </div>
            <div slot="goods_no" slot-scope="text">
              <a-tooltip>
                <template slot="title">
                  {{ text }}
                </template>
                <span>{{ text }}</span>
              </a-tooltip>
            </div>
            <span slot="price" slot-scope="text"> ￥{{ text || 0 }} </span>
          </a-table>
        </div>
      </a-table>

      <a-modal
        title="修改"
        width="800px"
        v-model="visible"
        @ok="submit"
        :afterClose="closeModal"
        :destroyOnClose="true"
        :confirmLoading="btnLoading"
      >
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
          <a-form-model-item
            label="产品代理佣金比例"
            prop="agent_percent"
            help="佣金=订单金额 * 商城让利比例 * 产品代理佣金比例"
          >
            <div class="flex">
              <a-input-number :min="0" :precision="2" class="inp" v-model="form.agent_percent" placeholder="请填写" />
              <span>%</span>
            </div>
          </a-form-model-item>
          <a-form-model-item
            label="送货上门佣金比例"
            prop="agent_install_percent"
            help="佣金=订单金额 * 商城让利比例 * 送货上门佣金比例"
          >
            <div class="flex">
              <a-input-number
                :min="0"
                :precision="2"
                class="inp"
                v-model="form.agent_install_percent"
                placeholder="请填写"
              />
              <span>%</span>
            </div>
          </a-form-model-item>
          <a-form-model-item label="是否使用默认设置">
            <a-radio-group v-model="form.agent_profit_default">
              <a-radio value="1"> 是 </a-radio>
              <a-radio value="0"> 否 </a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { supplierGoods } from '@/api/purchase/purchase'
import tabList from '@/views/saas/components/tabList.vue'
import { cyyUploadImg } from '@/components/CyyUi'
import { list as catListApi } from '@/api/purchase/cat'
import { setAgentGoodsPercent } from '@/api/daili'
// import { list as catListApi } from '@/api/goods/cat'
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 80,
  },
  {
    title: '商品信息',
    scopedSlots: {
      customRender: 'name',
    },
    width: 280,
  },
  {
    title: '供货商',
    scopedSlots: {
      customRender: 'supplier',
    },
    width: 200,
  },
  {
    title: '售价',
    dataIndex: 'price',
    scopedSlots: {
      customRender: 'price',
    },
    sorter: (a, b) => a.price - b.price,
  },
  {
    title: '库存',
    dataIndex: 'num',
    sorter: (a, b) => a.num - b.num,
  },
  {
    title: '货号',
    dataIndex: 'goods_no',
    scopedSlots: {
      customRender: 'goods_no',
    },
  },
  {
    title: '操作',
    width: 100,
    scopedSlots: {
      customRender: 'action',
    },
    fixed: 'right',
  },
]

const skuColumns = [
  {
    title: '规格名称',
    dataIndex: 'attr_name',
  },
  {
    title: '售价',
    dataIndex: 'price',
    scopedSlots: {
      customRender: 'price',
    },
    sorter: (a, b) => a.price - b.price,
  },
  {
    title: '库存',
    dataIndex: 'num',
    sorter: (a, b) => a.num - b.num,
  },
  {
    title: '重量(g)',
    dataIndex: 'weight',
    sorter: (a, b) => a.weight - b.weight,
  },
  {
    title: '规格图片',
    dataIndex: 'pic_url',
    scopedSlots: {
      customRender: 'pic_url',
    },
  },
  {
    title: '规格货号',
    dataIndex: 'goods_no',
    scopedSlots: {
      customRender: 'goods_no',
    },
  },
]
export default {
  components: {
    tabList,
    cyyUploadImg,
  },
  data() {
    return {
      tabList: [
        {
          key: 'saasPurchaseAuditList',
          name: '待审核商品',
        },
        {
          key: 'saasPurchaseAuditGoods',
          name: '云仓商品',
        },
        {
          key: 'saasSupplierCategory',
          name: '云仓分类',
        },
      ],

      // 搜索参数
      queryParam: {
        page: 1,
        limit: 10,
        name: '',
        status: '-1',
        goods_id: '',
        supplier_name: '',
        cat_id: 0,
      },
      columns,
      list: [],
      skuColumns,
      catList: [],

      form: {
        id: '',
        agent_percent: '',
        agent_install_percent: '',
        agent_profit_default: '',
      },
      visible: false,
      btnLoading: false,
      rules: {
        agent_percent: [{ required: true, message: '请选择', trigger: 'blur' }],
        agent_install_percent: [{ required: true, message: '请选择', trigger: 'blur' }],
        agent_profit_default: [{ required: true, message: '请选择', trigger: 'change' }],
      },
    }
  },

  created() {
    if (this.$route.meta.queryParam) {
      this.queryParam = this.$route.meta.queryParam
    }

    this.getList()
    this.getCatList()
  },

  beforeRouteLeave(to, from, next) {
    from.meta.queryParam = this.queryParam
    next()
  },

  methods: {
    getCatList() {
      catListApi({ is_show: -1 }).then((res) => {
        this.catList = res.data
      })
    },
    onCascaderChange(val) {
      this.queryParam.cat_id = val[val.length - 1]
    },
    see(id) {
      this.$router.push({
        path: `/saas/purchase/audit/edit?id=${id}`,
      })
    },

    // 分页请求
    tablePageChange(e) {
      this.queryParam.page = e
      this.getList()
    },

    // 获取数据
    async getList() {
      const res = await supplierGoods(this.queryParam)
      if (res.code == 0) {
        this.list = res.data.list
        this.totalCount = res.data.count
      }
    },

    edit({ agent_percent, agent_install_percent, id, agent_profit_default }) {
      this.form = {
        agent_percent,
        agent_install_percent,
        id,
        agent_profit_default,
      }
      this.visible = true
    },

    submit() {
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          let form = JSON.parse(JSON.stringify(this.form))

          this.btnLoading = true
          let res = await setAgentGoodsPercent(form)
          if (res.code == 0) {
            this.$message.success('操作成功')
            this.visible = false
            this.tablePageChange(1)
          } else {
            this.$message.error(res.msg)
          }
          this.btnLoading = false
        } else {
          return false
        }
      })
    },

    closeModal() {
      this.$refs['ruleForm'].resetFields()
    },
  },
}
</script>
<style lang="less" scoped>
.searchBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /deep/ .ant-input-affix-wrapper {
    width: 220px;
    margin-right: 20px;
  }
  .select {
    margin-top: 11px;
    display: flex;
    align-items: center;
    margin-right: 15px;
  }
  .ant-btn {
    margin-top: 11px;
  }
}
.tip {
  line-height: normal;
  margin-bottom: 0;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}
.name {
  display: flex;
  align-items: center;
  .pic {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 24px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info {
    flex: auto;
    width: 0;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    span {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    span:nth-child(2) {
      color: rgba(0, 0, 0, 0.45);
      margin-top: 6px;
    }
  }
}
.goods-info {
  display: flex;
  align-items: flex-start;
  .goods-pic {
    width: 48px;
    height: 48px;
    border-radius: 4px;
  }
  .info-box {
    margin-left: 24px;
    .goods-name {
      display: block;
      width: 160px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}

.flex {
  margin-bottom: 10px;

  span {
    width: 42px;
    height: 32px;
    background: #f7f7f7;
    border: 1px solid #d9d9d9;
    border-left: 0;
    text-align: center;
  }
}

::v-deep {
  .ant-input-number {
    flex: 1;
  }
}
</style>
